<mat-card *ngIf="node">
  <mat-card-content>
    <form [formGroup]="form" autocomplete="off">
      <mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper">
        <input
          matInput
          [cdkTrapFocusAutoCapture]="form.enabled"
          [cdkTrapFocus]="form.enabled"
          required
          placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
          formControlName="title"
          [errorStateMatcher]="matcher"
        />
        <mat-hint *ngIf="libraryTitleExists">{{ 'LIBRARY.HINTS.SITE_TITLE_EXISTS' | translate }}</mat-hint>
        <mat-error>
          {{ titleErrorTranslationKey | translate }}
        </mat-error>
      </mat-form-field>

      <mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper">
        <input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
      </mat-form-field>

      <mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper">
        <mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
          <mat-option [value]="type.value" *ngFor="let type of libraryType">
            {{ type.label | translate }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper">
        <textarea
          matInput
          placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
          rows="3"
          formControlName="description"
          [errorStateMatcher]="matcher"
        ></textarea>
        <mat-error>
          {{ 'LIBRARY.ERRORS.DESCRIPTION_TOO_LONG' | translate }}
        </mat-error>
      </mat-form-field>
    </form>
  </mat-card-content>

  <mat-card-actions align="end" *ngIf="canUpdateLibrary">
    <ng-container *ngIf="form.enabled">
      <button mat-button (click)="cancel()">
        {{ 'LIBRARY.DIALOG.CANCEL' | translate }}
      </button>
      <button mat-button color="primary" [disabled]="form.invalid || form.pristine" (click)="update()">
        {{ 'LIBRARY.DIALOG.UPDATE' | translate }}
      </button>
    </ng-container>
    <button mat-button color="primary" (click)="toggleEdit()" *ngIf="form.disabled">
      {{ 'LIBRARY.DIALOG.EDIT' | translate }}
    </button>
  </mat-card-actions>
</mat-card>
